<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/5
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <!-- 帖子 -->
    <title>Theme</title>
    <!-- 引入bootstrap框架的样式文件 -->y
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css">
    <!-- 引入导航 - css -->
    <link rel="stylesheet" href="${path}/css/person/person.css">
    <!-- 引入theme - css -->
    <link rel="stylesheet" href="${path}/css/forum-css/theme.css">
    <!-- 引入layUi - css -->
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
</head>
<body>
<!--导航-->
<%@include file="../sharedper/nav.jsp"%>

<div id="head" style="background-color: white">
    <img src="${requestScope.themeT.themeImg}" alt="" width="180px" height="160px"
         style="border-radius: 10%;margin: -50px 0 0 20px">
    <div style="margin:-80px 0 0 220px">
        <span style="font-size: 20px">${requestScope.themeT.themeName}吧&nbsp;&nbsp;</span>
        <%--<button class="btn btn-warning" type="button"--%>
                <%--style="font-size: 12px; padding: 3px 6px; margin-top: -2px; background-color: #ff8b3d">+ 关注</button>--%>

    </div>
    <div style="margin:20px 0 0 220px">
        <span class="glyphicon glyphicon-list-alt"> ${requestScope.postNum}&nbsp;&nbsp;</span>
        <span class="glyphicon glyphicon-comment"> ${requestScope.comNum}</span>
    </div>
    <div style="margin:-40px 0 0 780px">
        <a href="${path}/themeF/sendP">
        <button class="btn btn-warning" type="button"
                style="font-size: 14px; padding: 6px 12px; margin-top: -2px;background-color: #ff8b3d">
            <span class="glyphicon glyphicon-pencil">&nbsp;</span>去发帖
        </button>
        </a>
    </div>
</div>

<div id="neck">
    <!-- 左侧 -->
    <div id="leftNeck">
        <%--<div style="border: 1px solid#f0f0f0; height: 60px; background-color: #fcfcfc;">--%>
            <%--<div style="margin:20px 0 0 20px">--%>
                <%--<span class="glyphicon glyphicon-list-alt">&nbsp;最新发布&nbsp;&nbsp;</span>--%>
                <%--<span class="glyphicon glyphicon-list-alt">&nbsp;精华</span>--%>
            <%--</div>--%>
        <%--</div>--%>
        <div style="height: 40px;border: 1px solid#f0f0f0; background-color: #fcfcfc;margin-top: -1px">
            <div style="margin: 10px 0 0 20px">
                <span style="font-size: 12px">主题分类:&nbsp;</span>

                <%--<span class="badge" value="-1" style="background-color: #f0f0f0;color: #ff8b3d">全部</span>--%>
                <c:forEach items="${classsList}" var="classsList">
                    <%--<c:choose>--%>
                        <%--<c:when test="${class_id == classsList.classId}">--%>
                            <span id="classs" onclick="classs()" class="badge" value="${classsList.classId}"
                                  style="cursor:pointer;background-color: #f0f0f0;color: #7b7b7b">${classsList.className}</span>
                        <%--</c:when>--%>
                    <%--</c:choose>--%>
                </c:forEach>
            </div>
        </div>

        <div style="border: 1px solid#f0f0f0; background-color: #fcfcfc;margin-top: -1px;">
            <div style="height: 20px"></div>

            <%--异步分页区域--%>
            <div id="content">
                <%--<input id="themeId" value="${requestScope.themeT.themeId}" style="display: none">--%>
            </div>

        </div>
    </div>

    <!-- 右侧 -->
    <div id="rightNeck">
        <div style="margin: 20px 20px 20px 20px">
            <img src="${path}/imgs/forum-imgs/111.png" height="300px" width="200px">
        </div>
    </div>
</div>

<div style="height: 50px; clear:both;">
    &nbsp;
</div>
<div style="width: 100%; background-color: #fcfcfc">
    <hr style="height: 2px;background-color: #ff8b3d;width: 100%;">
    <span style="text-align: center;margin: 0 auto">&nbsp;关于我们&nbsp;|&nbsp;联系我们&nbsp;|&nbsp;...</span>
</div>

<!--异步分页的区域-->
<%--目的:为了让外部的js文件使用灵活的项目的上下文路径--%>
<input type="hidden" value="${path}" id="path">

<script type="text/javascript" src="${path}/plugins/layui/layui.all.js"></script>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<!-- 引入forum - js -->
<script src="${path}/js/forum-js/forum.js"></script>
<!-- 引入theme - js -->
<script src="${path}/js/forum-js/theme.js"></script>

<script>
    $(function(){
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#content").load("${path}/themeF/postPage",
            {themeId:${requestScope.themeT.themeId}}
        );
        <%--$("#content").load("${path}/themeF/postPage");--%>
    });
</script>
</body>
</html>